import React, {Component} from 'react';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import InfoPage from './InfoPage';
import { Link } from 'react-router';
import CONFIG from '../../config';

import { Styles } from '../../styles';

export default class Wrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isExpend: false,
    }
  }

  openInfoPage = () => this.setState({isExpend: true});

  closeInfoPage = () => this.setState({isExpend: false});

  render() {
  	return (
      <div className={Styles.wrapper}>
        <div className={Styles.wrap}>
          <div className={Styles['welcome-box']}>
            <div className={Styles['welcome-box-center']+' center-block'}>
              {this.props.children}
            </div>
          </div>
          <div className={Styles.info}>
            <IconButton 
              onClick={this.openInfoPage.bind(this)} 
              tooltip="什么是imlooke?" 
              tooltipPosition="bottom-right">
              <FontIcon className="icon-info_outline" color={"#fff"} />
            </IconButton>
          </div>
          <div className='about'>
            <Link className={Styles['welcome-a']} to={`/about`}>关于我们</Link>
          </div>
          <div className='beian'>
            <a className={Styles['welcome-a']}>新ICP备16000902号</a>
          </div>
        </div>

        <div style={styles.footer}>
          <span style={styles.footerTitle}/*imlooke. */>
            <span style={{fontSize: 16}}> 为了更好的体验，推荐使用
              <a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html" target="_blank">
                谷歌浏览器
              </a>
            </span>
          </span>
        </div>

        <InfoPage
          isExpend={this.state.isExpend}
          closeInfoPage={this.closeInfoPage}
        />
      </div>
  	);
  }
};

const styles = {
  footer: {
    height: 56,
    color:'rgba(0,0,0,0.4)', 
    textAlign: 'center'
  },
  footerTitle: {
    display: 'block', 
    height: 24, 
    padding: 16, 
    fontSize: 16, // 18
    color: '#FF9800'
  }
};
